<template>
  <view>
    <form @reset="formReset" @submit="formSubmit" :reportSubmit="true">
      <view class="font">
        <view class="blbanner">
          <view class="b-head" :style="'border-color:' + color">预约模式</view>
        </view>
        <view
          class="weui-cells weui-cells_after-title"
          style="margin-bottom: 40rpx"
        >
          <radio-group
            @change="radioChange1"
            class="msradiogroup"
            name="radioChange1"
          >
            <label
              class="weui-cell weui-check__label"
              :style="
                'background:' +
                (item.checked ? color : '') +
                ';color:' +
                (item.checked ? '#fff' : '')
              "
              v-for="(item, index) in radioItems"
              :key="item.value"
            >
              <radio
                :checked="item.checked"
                class="weui-check"
                :value="item.value"
              ></radio>

              <view class="weui-cell__bd">{{ item.name }}</view>

              <view class="weui-cell__hd weui-check__hd_in-checkbox">
                <icon
                  class="weui-icon-checkbox_circle"
                  color="#DEDEDE"
                  size="23"
                  type="circle"
                  v-if="!item.checked"
                ></icon>
                <icon
                  class="weui-icon-checkbox_success"
                  color="#FFFFFF"
                  size="23"
                  type="success"
                  v-if="item.checked"
                ></icon>
              </view>
            </label>
          </radio-group>
        </view>
        <view class="blbanner">
          <view class="b-head" :style="'border-color:' + color">预约信息</view>
        </view>
        <view class="reserve">
          <view class="flex reserve_type">
            <view>选择人数</view>
            <view class="reserve_date">
              <picker
                @change="bindjcrsChange"
                name="jcrs"
                :range="jcrsarray"
                :value="jcrsarray[jindex]"
              >
                <view class="picker">{{ jcrsarray[jindex] }}</view>
              </picker>
              <image
                class="reserve_arrow"
                src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/huise@2x.png"
              ></image>
            </view>
          </view>
          <navigator
            class="flex reserve_type"
            :url="'reservetime?storeid=' + storeid"
          >
            <view>选择时间</view>
            <view class="reserve_date">
              <view class="picker">{{ date }}日{{ time }}</view>
              <image
                class="reserve_arrow"
                src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/huise@2x.png"
              ></image>
            </view>
          </navigator>
          <block v-if="StoreInfo.storeset.is_yyzw == '1'">
            <view
              :class="
                'flex reserve_type ' +
                (item.open ? 'kind-list__item-hd_show' : '')
              "
            >
              <view>选择桌位类型</view>
              <view class="reserve_date">
                <view class="reserve_tab">
                  <picker
                    @change="bindPickerChange"
                    name="zwpicker"
                    :range="array"
                    rangeKey="name"
                    :value="array[index]"
                  >
                    <view class="picker reserve_sele" v-if="array.length != 0"
                      >{{ array[index].name }}--最低消费{{
                        array[index].zd_cost
                      }}</view
                    >
                    <view class="picker reserve_sele" v-else
                      >商家暂未添加桌位类型</view
                    >
                  </picker>
                </view>
                <image
                  class="reserve_arrow"
                  src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/huise@2x.png"
                ></image>
              </view>
            </view>
            <view class="flex reserve_type">
              <view>桌位预定费用</view>
              <view class="reserve_date">
                <view class="picker">{{ array[index].yd_cost }}元</view>
                <image class="reserve_arrow" src=""></image>
              </view>
            </view>
          </block>
          <view class="reserve_type reserve_man">
            <view class="reserve_num">联系人</view>
            <input
              class="flex-grow-1 reserve_inp"
              name="lxr"
              placeholder="请输入联系人称呼"
              placeholderStyle="color: #999;font-size: 30rpx;"
            />
            <view class="flex-grow-0">
              <radio-group class="radio-group" name="sexradiogroup">
                <label
                  class="radio"
                  :style="'margin-left:' + (index == 0 ? '0' : '')"
                  v-for="(item, index) in items"
                  :key="index"
                >
                  <radio
                    :checked="item.checked"
                    :color="color"
                    :value="item.value"
                  ></radio>

                  {{ item.name }}
                </label>
              </radio-group>
            </view>
          </view>
          <view class="reserve_type reserve_man" style="border: none">
            <view class="reserve_num">联系电话</view>
            <input
              class="flex-grow-1 reserve_inp"
              name="tel"
              placeholder="请输入电话号码"
              placeholderStyle="color: #999;font-size: 30rpx;"
              type="number"
            />
          </view>
        </view>
        <block v-if="radioItems[0].checked">
          <view class="blbanner">
            <view class="b-head" :style="'border-color:' + color"
              >商品列表</view
            >
          </view>
          <view class="reserve">
            <navigator
              class="flex reserve_type"
              style="border: none"
              :url="
                '../smdc/smdcxgsp?storeid=' +
                store.id +
                '&zuid=' +
                zuid +
                '&dr_id=' +
                drid +
                '&tableid=' +
                tableid +
                '&isyy=1'
              "
            >
              <view>前往选择商品</view>
              <view class="reserve_date">
                <image
                  class="reserve_arrow"
                  src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/huise@2x.png"
                ></image>
              </view>
            </navigator>
            <view
              class="cart-item flex-row flex-y-center"
              v-for="(item, index) in cart_list"
              :key="index"
            >
              <view class="xzhiding" v-if="item.is_jc == '1'">加菜</view>

              <view class="flex-grow-0 flex-y-center">
                <image
                  class="goods-pic"
                  mode="aspectFill"
                  :src="item.logo"
                ></image>
              </view>

              <view class="flex-grow-1 flex-col">
                <view class="flex-grow-1">
                  <view class="goods-name">{{ item.name }}</view>
                  <view class="attr-list">
                    <view class="attr-item">{{ item.spec }}</view>
                  </view>
                </view>
                <view class="flex-grow-0 flex-row">
                  <view class="flex-grow-1 num">×{{ item.num }}</view>
                  <view class="flex-grow-0 price">￥{{ item.money }}</view>
                </view>
              </view>
            </view>
            <view
              class="sfk flex-row flex-y-center"
              v-if="cart_list.length > 0"
            >
              <view class="sfk-fv flex-grow-0">实付款</view>
              <view class="flex-grow-1 xiaoji">
                <view>{{ gwcinfo.num }}份商品</view>
                <view>小计</view>
                <view>￥{{ gwcprice }}</view>
              </view>
            </view>
          </view>
        </block>
        <view class="reserve_marks reserve">
          <view>备注</view>
          <textarea
            class="reserve_text"
            name="beizhu"
            placeholder="请输入备注信息"
          ></textarea>
        </view>
        <view class="footer">
          <button
            @tap="requestSM"
            formType="submit"
            :style="'background:' + color"
          >
            立即预约
          </button>
        </view>
      </view>
    </form>
    <form @reset="formReset" @submit="qdzf" :reportSubmit="true">
      <view @tap="yczz" class="drawer_screen" v-if="showModal"></view>
      <view class="drawer_box" v-if="showModal">
        <view class="drawer_title">请选择支付方式</view>
        <view class="weui-cells weui-cells_after-title">
          <radio-group
            @change="radioChange"
            class="radio-group"
            name="radiogroup"
          >
            <label>
              <view class="weui-cell">
                <view class="zfimg">
                  <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/weixin.png"></image>
                </view>
                <view class="weui-cell__bd">微信支付</view>
                <view class="weui-cell__ft">
                  <radio :checked="zffs == 1" value="wxzf"></radio>
                </view>
              </view>
            </label>
            <label v-if="kqyue">
              <view class="weui-cell" style="border-top: 1rpx solid #e6e6e6">
                <view class="zfimg">
                  <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/yeqb.png"></image>
                </view>
                <view class="weui-cell__bd">
                  余额支付
                  <text class="yetext">您的余额 {{ userInfo.wallet }}</text>
                </view>
                <view class="weui-cell__ft">
                  <radio
                    :checked="zffs == 2"
                    color="#FF9700"
                    :disabled="!kqyue"
                    value="yezf"
                  ></radio>
                </view>
              </view>
            </label>
          </radio-group>
        </view>
        <view class="drawer_title1">
          您选择的{{ zfwz }}
          <text v-if="zffs == 3">({{ jf_proportion }}积分可抵1元)</text>
        </view>
        <button :class="btntype" :disabled="zfz" formType="submit">
          <view v-if="!zfz && zffs != 4">
            确定支付
            <text class="zftext">￥{{ totalprice }}</text>
          </view>
          <view v-if="!zfz && zffs == 4">
            确定到付
            <text class="zftext">￥{{ totalprice }}</text>
          </view>
          <view v-if="zfz">
            <text class="zfztext">支付中...</text>
          </view>
        </button>
      </view>
    </form>
    <view @tap="mdoalclose" class="modalzz" v-if="!mdoaltoggle"></view>
    <view :class="'modal ' + (mdoaltoggle ? '' : 'active')">
      <view class="modalbd">
        <icon size="50" type="success"></icon>
        <view class="xdcg">下单成功!</view>
      </view>
    </view>
  </view>
</template>

<script>
import cardlist from '@/ymq_canyino2o/dist/cardlist/index'
import gettel from '@/ymq_canyino2o/dist/gettel/index'
var form_id
var app = getApp()
var util = require('../../utils/util.js')
export default {
  components: {
    cardlist,
    gettel
  },
  data() {
    return {
      date: '',
      index: 0,
      jindex: 0,
      time: '12:00',
      array: [],
      jcrsarray: [
        '1人',
        '2人',
        '3人',
        '4人',
        '5人',
        '6人',
        '7人',
        '8人',
        '9人',
        '10人',
        '10人以上'
      ],
      showModal: false,
      zftype: true,
      zffs: 1,
      zfz: false,
      zfwz: '微信支付',
      btntype: 'btn_ok1',
      mdoaltoggle: true,

      radioItems: [
        {
          name: '提前选商品',
          value: '1'
        },
        {
          name: '提前订座',
          value: '0',
          checked: true
        }
      ],

      items: [
        {
          name: '先生',
          value: 1,
          checked: true
        },
        {
          name: '女士',
          value: 2
        }
      ],

      cart_list: '',

      gwcinfo: {
        num: ''
      },

      gwcprice: '',
      storeid: '',
      zuid: '',

      userInfo: {
        wallet: ''
      },

      wallet: '',
      total_score: '',
      hdfk: false,
      kqyue: false,

      StoreInfo: {
        storeset: {
          is_yyzw: ''
        }
      },

      store: {
        id: ''
      },

      zflx: '',
      form_id: '',
      totalprice: '',
      ydcost: '',
      forminfo: '',
      color: '',
      name: '',
      zd_cost: '',
      yd_cost: '',
      checked: '',
      drid: '',
      tableid: '',
      jf_proportion: ''
    }
  },
  onLoad: function (e) {
    this.onLoadClone3389(e)
  },
  onReady: function () {},
  onShow: function () {
    var that = this
    var e = this.storeid
    var a = uni.getStorageSync('users').id
    app.globalData.util.request({
      url: 'entry/wxapp/mycar',
      cachetime: '0',
      data: {
        store_id: e,
        user_id: a,
        type: 2
      },
      success: function (e) {
        console.log(e)
        that.setData({
          cart_list: e.data.res,
          gwcinfo: e.data,
          gwcprice: e.data.money
        })
      }
    })
  },
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {
    this.onLoadClone3389({})
    uni.stopPullDownRefresh()
  },
  onReachBottom: function () {},
  methods: {
    onLoadClone3389: function (e) {
      app.globalData.setNavigationBarColor(this)
      var that = this
      var t = e.storeid
      var o = util.formatTime(new Date()).substring(0, 10).replace(/\//g, '-')
      var i = uni.getStorageSync('users').id
      console.log(t, o.toString(), i)
      this.setData({
        date: o,
        storeid: t,
        zuid: i
      })
      app.globalData.util.request({
        url: 'entry/wxapp/UserInfo',
        cachetime: '0',

        data: {
          user_id: i
        },

        success: function (e) {
          console.log(e)
          that.setData({
            userInfo: e.data,
            wallet: e.data.wallet,
            total_score: e.data.total_score
          })
        }
      })
      app.globalData.util.request({
        url: 'entry/wxapp/TableType',
        cachetime: '0',

        data: {
          store_id: t
        },

        success: function (e) {
          console.log(e)
          that.setData({
            array: e.data
          })
        }
      })
      app.globalData.util.request({
        url: 'entry/wxapp/StoreInfo',
        cachetime: '0',

        data: {
          store_id: t,
          type: 2
        },

        success: function (e) {
          console.log(e.data)
          var t = e.data
          if ('1' == t.storeset.is_hdfk) {
            that.setData({
              hdfk: true
            })
          }
          if (
            '1' == getApp().globalData.xtxx.is_yuepay &&
            '1' == t.storeset.is_yuepay
          ) {
            that.setData({
              kqyue: true
            })
          }
          that.setData({
            StoreInfo: t,
            store: t.store,
            time: t.store.time
          })
        }
      })
    },

    requestSM: function () {
      app.globalData.util.requestSM('reserve').then(function (e) {})
    },

    radioChange1: function (e) {
      console.log('radio111发生change事件，携带value值为：', e.detail.value)
      for (var t = this.radioItems, a = 0, o = t.length; a < o; ++a) {
        t[a].checked = t[a].value == e.detail.value
      }
      this.setData({
        radioItems: t
      })
    },

    xszz: function () {
      this.setData({
        showModal: true
      })
    },

    yczz: function () {
      this.setData({
        showModal: false
      })
    },

    radioChange: function (e) {
      console.log('radio发生change事件，携带value值为：', e.detail.value)
      this.setData({
        zflx: e.detail.value
      })
      if ('wxzf' == e.detail.value) {
        this.setData({
          zffs: 1,
          zfwz: '微信支付',
          btntype: 'btn_ok1'
        })
      }
      if ('yezf' == e.detail.value) {
        this.setData({
          zffs: 2,
          zfwz: '余额支付',
          btntype: 'btn_ok2'
        })
      }
      if ('jfzf' == e.detail.value) {
        this.setData({
          zffs: 3,
          zfwz: '积分支付',
          btntype: 'btn_ok3'
        })
      }
    },

    bindPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.setData({
        index: e.detail.value
      })
    },

    bindDateChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.setData({
        date: e.detail.value
      })
    },

    bindTimeChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.setData({
        time: e.detail.value
      })
    },

    bindjcrsChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.setData({
        jindex: e.detail.value
      })
    },

    formSubmit: function (e) {
      var that = this
      var a = uni.getStorageSync('users').id
      form_id = e.detail.formId
      that.setData({
        form_id: form_id
      })
      app.globalData.util.request({
        url: 'entry/wxapp/AddFormId',
        cachetime: '0',
        data: {
          user_id: a,
          form_id: e.detail.formId
        },
        success: function (e) {
          console.log(e.data)
        }
      })
      console.log('form发生了submit事件，携带数据为：', e.detail.value)
      var o = this.array
      console.log(o)
      if (0 != o.length) {
        var i = getApp().globalData.getOpenId
        var s = this.store.name
        var l = this.store.id
        var n = this.StoreInfo.storeset.is_yydc
        var r = e.detail.value.datepicker
        var d = e.detail.value.timepicker
        var c = e.detail.value.lxr
        var u = e.detail.value.jcrs
        var p = e.detail.value.tel
        var f = e.detail.value.beizhu
        var g = e.detail.value.radioChange1
        if (null != e.detail.value.zwpicker) {
          var h = e.detail.value.zwpicker.name
          var m = e.detail.value.zwpicker.id
          var v =
            (e.detail.value.zwpicker.zd_cost,
            parseFloat(e.detail.value.zwpicker.yd_cost))
        } else {
          h = ''
          m = ''
          v = 0
        }
        if ('1' == n && '1' == g) {
          var w = (v + Number(this.gwcprice)).toFixed(2)
        } else {
          w = v
        }
        if ('1' != g || 0 != this.cart_list.length) {
          console.log(w, i, s, a, l, r, d, h, m, c, u, p, v, f, g, n)
          that.setData({
            totalprice: w,
            ydcost: v,
            forminfo: e.detail.value
          })
          var y = ''
          var z = true
          if ('' == c) {
            y = '请填写您的姓名！'
          } else {
            if ('' == u) {
              y = '请选择您的就餐人数'
            } else {
              if ('' == p) {
                y = '请填写您的手机号！'
              } else {
                if (p.length < 7) {
                  y = '手机号格式不正确'
                } else {
                  z = false
                  that.setData({
                    showModal: true
                  })
                }
              }
            }
          }
          if (1 == z) {
            uni.showModal({
              title: '提示',
              content: y
            })
          }
        } else {
          uni.showModal({
            title: '提示',
            content: '请前往选择商品'
          })
        }
      } else {
        uni.showModal({
          title: '提示',
          content: '商家暂未添加桌位类型，暂时不能预定'
        })
      }
    },

    qdzf: function (e) {
      var that = this
      var t = this.forminfo
      var o = this.zffs
      var i = getApp().globalData.getOpenId
      var s = this.store.name
      var l = uni.getStorageSync('users').id
      if ('2' == o) {
        var n = Number(this.userInfo.wallet)
        var r = Number(this.totalprice)
        console.log(n, r)
        if (n < r) {
          return void uni.showToast({
            title: '余额不足支付',
            icon: 'loading'
          })
        }
      }
      app.globalData.util.request({
        url: 'entry/wxapp/AddFormId',
        cachetime: '0',
        data: {
          user_id: l,
          form_id: e.detail.formId
        },
        success: function (e) {
          console.log(e.data)
        }
      })
      var d = this.store.id
      var c = this.StoreInfo.storeset.is_yydc
      var u = this.date
      var p = this.time
      var f = t.lxr
      var g = t.jcrs
      var h = t.tel
      var m = t.beizhu
      var v = t.radioChange1
      var w = t.sexradiogroup
      if (null != t.zwpicker) {
        var y = t.zwpicker.name
        var z = t.zwpicker.id
        var _ = (t.zwpicker.zd_cost, parseFloat(t.zwpicker.yd_cost))
      } else {
        y = ''
        z = ''
        _ = 0
      }
      var x = []
      var D = this.cart_list
      var k = this.totalprice
      if ('1' == v) {
        D.map(function (e) {
          if (0 < e.num) {
            var t = {}
            t.name = e.name
            t.img = e.logo
            t.num = e.num
            t.money = e.money
            t.dishes_id = e.good_id
            t.spec = e.spec
            x.push(t)
          }
        })
      }
      console.log(k, D, x)
      console.log(i, s, l, d, u, p, y, z, f, g, h, _, m, v, c, w)
      console.log(t, form_id, o)
      this.setData({
        zfz: true
      })
      app.globalData.util.request({
        url: 'entry/wxapp/AddYyOrder',
        cachetime: '0',
        data: {
          store_id: d,
          user_id: l,
          delivery_time: u + ' ' + p,
          pay_type: o,
          sex: w,
          sz: x,
          table_id: z,
          deposit: _,
          name: f,
          tel: h,
          tableware: g,
          note: m,
          money: k
        },
        success: function (e) {
          console.log(e)
          var t = e.data
          if ('下单失败' != e.data) {
            that.setData({
              zfz: false,
              showModal: false
            })
            if (2 == o) {
              console.log('余额支付流程')
              that.setData({
                mdoaltoggle: false
              })
              setTimeout(function () {
                uni.redirectTo({
                  url: 'reserveinfo?oid=' + t
                })
              }, 1000)
            }
            if (1 == o) {
              console.log('微信支付流程')
              if (0 < Number(k)) {
                app.globalData.util.request({
                  url: 'entry/wxapp/pay',
                  cachetime: '0',
                  data: {
                    openid: i,
                    money: k,
                    order_id: t
                  },
                  success: function (e) {
                    console.log(e)
                    uni.requestPayment({
                      timeStamp: e.data.timeStamp,
                      nonceStr: e.data.nonceStr,
                      package: e.data.package,
                      signType: e.data.signType,
                      paySign: e.data.paySign,
                      success: function (e) {
                        console.log(e)
                      },
                      complete: function (e) {
                        console.log(e)
                        if ('requestPayment:fail cancel' == e.errMsg) {
                          uni.showToast({
                            title: '取消支付',
                            icon: 'loading'
                          })
                          that.setData({
                            zfz: false
                          })
                        }
                        if ('requestPayment:ok' == e.errMsg) {
                          that.setData({
                            mdoaltoggle: false
                          })
                          setTimeout(function () {
                            uni.redirectTo({
                              url: 'reserveinfo?oid=' + t
                            })
                          }, 1000)
                        }
                      }
                    })
                  }
                })
              } else {
                that.setData({
                  mdoaltoggle: false
                }),
                  setTimeout(function () {
                    uni.redirectTo({
                      url: 'reserveinfo?oid=' + t
                    })
                  }, 1000)
              }
            }
          } else {
            uni.showToast({
              title: '请重试',
              icon: 'loading',
              duration: 1000
            })
          }
        }
      })
    },

    formReset() {
      console.log('占位：函数 formReset 未声明')
    },

    mdoalclose() {
      console.log('占位：函数 mdoalclose 未声明')
    }
  }
}
</script>
<style>
@import './reserve.css';
</style>
